<template>
  <div class="home">
    <el-form ref="form" :model="form" label-width="200px" inline-message>
      <el-form-item>
        <el-tag slot="label" class="label-text">数据库类型</el-tag>
        <el-select
          v-model="form.databaseType"
          placeholder="请选择数据库类型"
          class="select-item">
          <el-option
            v-for="item in databaseTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">IP PORT</el-tag>
        <!--<el-input v-model="form.name" class="select-item"></el-input>-->
        <el-select
          v-model="form.databaseIp"
          filterable
          clearable
          allow-create
          default-first-option
          placeholder="请选择IP"
          @visible-change="visibleChange" class="select-item-2">
          <el-option
            v-for="item in databaseIps"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select
          v-model="form.databasePort"
          filterable
          clearable
          allow-create
          default-first-option
          placeholder="请选择端口"
          @visible-change="visibleChange2" class="select-item-2">
          <el-option
            v-for="item in databasePorts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">用户名</el-tag>
        <el-input v-model="form.databaseUser" class="select-item" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">密码</el-tag>
        <el-input v-model="form.databasePass"
                  class="select-item"
                  :type="inputType">
          <i slot="suffix" class="el-input__icon el-icon-view"
             @click="toHidden"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-tag slot="label" class="label-text">数据库</el-tag>
        <el-select v-model="form.databaseName" placeholder="请选择数据库" class="select-item">
          <el-option
            v-for="item in databaseNames"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="from-button">
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="onSubmit">测试</el-button>
          </el-col>
          <!--<el-col :span="8">
            <el-button type="primary" @click="prePage">返回</el-button>
          </el-col>-->
          <el-col :span="12">
            <el-button type="primary" @click="nextPage">继续</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
import { isIP, isNum3 } from '../assets/js/regExp'
import { CONNECT_DATABASE } from '../api/http'
export default {
  name: 'home',
  data () {
    return {
      inputType: 'password',
      form: {
        databaseType: 'mysql',
        databaseIp: '118.190.56.24',
        databasePort: '33306',
        databaseUser: 'root',
        databasePass: '123456',
        databaseName: ''
      },
      databaseTypes: [{
        value: 'oracle',
        label: 'oracle'
      }, {
        value: 'mysql',
        label: 'mysql'
      }],
      databaseIps: [{
        value: '172.0.0.1',
        label: '172.0.0.1'
      }, {
        value: '118.190.56.24',
        label: '118.190.56.24'
      }],
      databasePorts: [{
        value: '3306',
        label: '3306'
      }, {
        value: '33306',
        label: '33306'
      }],
      databaseNames: [] // 后台返回
    }
  },
  methods: {
    onSubmit () {
      // console.log('submit!')
      // this.$message({
      //   message: '恭喜你，这是一条成功消息',
      //   type: 'success', // success/warning/info/error
      //   center: true
      // })
      let params = {
        databaseType: this.form.databaseType,
        databaseIp: this.form.databaseIp,
        databasePort: this.form.databasePort,
        databaseUser: this.form.databaseUser,
        databasePass: this.form.databasePass
      }
      CONNECT_DATABASE(params).then(res => {
        if (res.flag) {
          this.databaseNames = res.data.map(item => {
            return { label: item, value: item }
          })
          this.$message({
            message: res.message,
            type: 'success', // success/warning/info/error
            center: true
          })
          this.form.databaseName = this.databaseNames[0].value
          localStorage.setItem('__D__B__', JSON.stringify(params))
        }
        // console.log(res)
      })
    },
    nextPage () {
      // console.log('nextPage!')
      if (this.form.databaseName === '') {
        this.$message({
          message: '请选择数据库',
          type: 'warning',
          center: true
        })
      }
      let db = JSON.parse(localStorage.getItem('__D__B__'))
      // let dataBase = { databaseName: this.form.databaseName, ...dbStr }
      db.databaseName = this.form.databaseName
      localStorage.setItem('__D__B__', JSON.stringify(db))
      this.$router.replace('/code')
    },
    prePage () {
      // this.$router.replace('/code')
    },
    visibleChange (flag) {
      if (!flag) {
        let ip = this.form.databaseIp
        if (ip === '') return
        if (!isIP(ip)) {
          this.databaseIps = this.databaseIps.filter(item => item.value !== ip)
          this.form.databaseIp = ''
          this.$message({
            message: '输入IP不对',
            type: 'warning', // success/warning/info/error
            center: true
          })
        }
      }
    },
    visibleChange2 (flag) {
      if (!flag) {
        let port = this.form.databasePort
        if (port === '') return
        if (!isNum3(port)) {
          this.databasePorts = this.databasePorts.filter(item => item.value !== port)
          this.form.databasePort = ''
          this.$message({
            message: '端口不对',
            type: 'warning', // success/warning/info/error
            center: true
          })
        }
      }
    },
    toHidden () {
      this.inputType = this.inputType === 'password' ? 'text' : 'password'
    }
  }
}
</script>
<style lang="scss">
  .home {
    .el-form-item {
      margin: 26px 0;
    }
    .el-form-item__label {
      text-align: center;
      padding: 0;
    }
    .from-button {
      margin-top: 38px;
      .el-form-item__content {
        margin-left: 0!important;
      }
    }
    .label-text {
      background-color: #e8f9fd;
      display: inline-block;
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      font-size: 14px;
      color: #1dc4e9;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .select-item {
      width: 100%;
    }
    .select-item-2 {
      width: 50%;
    }
  }
</style>
